import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import { UserOutlined, LockOutlined, PhoneOutlined } from "@ant-design/icons-vue";
import styles from "./login.module.less";
import { $login } from "@/api/admin/admin";
import { useStore as useUserStore } from "@/store/user";
import useNavigator from "@/hooks/useNavigator";
import _ from "lodash";
import { message } from "ant-design-vue";
import validateInstance from "@/libs/validate/validate";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const userStore = useUserStore();
    const redirectPath: any = navigator.route.query?.redirect || '/';
    const form = reactive({
      username: '',
      password: '',
      mobile: "",
      code: "",
      logining: false,
    } as any);
    //
    const navs = ref([
      {
        name: '账号登录'
      },
    ]);
    const nav_actived = ref(0);
    const submit = _.debounce(() => {
      if (form.logining) {
        return;
      }
      if (nav_actived.value === 0) {
        if (!form.username) {
          message.error("请输入账号!");
          return;
        }
        if (!form.password) {
          message.error("请输入密码!");
          return;
        }
        form.logining = true;
        const logining = message.loading("登录中...", 0);
        $login({
          phone: form.username,
          password: form.password,
        }).then((res: any) => {
          console.log(res);
          message.success("登录成功!");
          userStore.login({
            token: res.data?.token || "",
            uid: res.data?.uid || "",
            head_img: res.data?.head_img || "",
            username: res.data?.username || "",
            isSuperAdmin: res.data?.is_super || false,
          });
          navigator.push(redirectPath);
        }).finally(() => {
          form.logining = false;
          logining();
        });
      } else {
        if (!validateInstance.test(form.mobile, "phone")) {
          return message.error("手机号不正确");
        }
        if (!form.code) {
          message.error("请输入动态码");
          return;
        }
      }
    }, 300, { leading: true, trailing: false })
    const keyUpLogin = (e: any) => {
      if (e.keyCode === 13) {
        submit();
      }
    }
    onMounted(() => {
      window.addEventListener('keyup', keyUpLogin);
    })
    onUnmounted(() => {
      window.removeEventListener('keyup', keyUpLogin);
    })
    return () => (
      <div class={styles.login}>
        <div class={styles['login-img']}>
          <img src={require("@/assets/image/login.jpg")} />
        </div>
        <div class={styles['login-cards']}>
          <div class={styles.card}>
            <div class={styles['card-titles']}>
              <div class={styles['logo']}>
                <img src={require("@/assets/image/logo.png")} />
              </div>
              <div class={styles['title']}>中联金安-安旅保</div>
            </div>
            <div class={styles['navs']}>
              {
                navs.value.map((item: any, index: number) => (
                  <div class={[styles['nav'], index === nav_actived.value && styles.actived]} onClick={() => { nav_actived.value = index }}>
                    {item.name}
                  </div>
                ))
              }
            </div>
            <div class={styles['container']}>
              <div class={styles['sign-rows']}>
                {
                  nav_actived.value === 0 ? (
                    <>
                      <div class={styles['sign-row']}>
                        <div class={styles['sign-field']}>
                          <UserOutlined class={styles['field-icon']} />
                          <input v-model={form.username} placeholder="账号" />
                        </div>
                      </div>
                      <div class={styles['sign-row']}>
                        <div class={styles['sign-field']}>
                          <LockOutlined class={styles['field-icon']} />
                          <input v-model={form.password} placeholder="密码" type="password" />
                        </div>
                      </div>
                    </>
                  ) : (
                    <>
                      <div class={styles['sign-row']}>
                        <div class={styles['sign-field']}>
                          <PhoneOutlined class={styles['field-icon']} />
                          <input v-model={form.mobile} placeholder="手机号" />
                        </div>
                      </div>
                      <div class={styles['sign-row']}>
                        <div class={styles['sign-field']}>
                          <input v-model={form.code} placeholder="验证码" />
                          <div class={styles['send-btn']}>获取动态码</div>
                        </div>
                      </div>
                    </>
                  )
                }
              </div>
              <div class={styles['footer']} onClick={() => { submit() }}>立即登录</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})